<template>
  <m-layout type="primary">
    <mt-header title="登录" slot="header"></mt-header>
    <div slot="body">
      <div v-if="list.length" class="login-role-list">
        <br/>
        <e-heading>请选择机构角色</e-heading>
        <mt-cell v-for="(item, index) in list" :key="index" :title="item.authName" :value="item.roleName" is-link  @click.native="handleClick(index)"/>
      </div>
      <form v-else class="login" novalidate="novalidate" @submit.prevent="handleSubmit">
        <div v-if="errorMessage" class="error">{{errorMessage}}</div>
        <ul>
          <li>
            <m-input placeholder="请输入手机号码" v-model.trim="form.account" type="number" />
          </li>
          <li>
            <e-password v-model.trim="form.loginPwd" />
          </li>
          <li v-if="showCode">
            <e-img-code v-model="form.validateCode" :img-key.sync="form.randomKey" ref="imgCode" />
          </li>
        </ul>
        <br/>
        <br/>
        <mt-button :disabled="!form.account||!form.loginPwd" type="primary" size="large" >登录</mt-button>
        <!--
        <br/>
        <mt-button type="primary" plain size="large" >立即注册</mt-button>
        <br/>
        <mt-button plain size="large" >立即注册</mt-button>
        <br/>
        <mt-button type="danger" plain size="large" :disabled="true">立即注册</mt-button>
        -->
      </form>
    </div>
  </m-layout>
</template>

<script>
import EPassword from '@e-ui/Password'
import EImgCode from '@e-ui/ImgCode'
import Cookies from 'js-cookie'
import api from 'api'
export default {
  components: {
    EPassword,
    EImgCode
  },
  data () {
    return {
      form: {
        account: '',
        loginPwd: '',
        validateCode: '',
        randomKey: ''
      },
      showCode: false,
      errorMessage: '',
      list: []
    }
  },
  methods: {
    handleSubmit (e) {
      if (this.form.account && this.form.loginPwd) {
        import('js-md5').then((md5) => {
          let data = {...this.form}
          data.loginPwd = md5(data.loginPwd)
          if (!this.showCode) {
            delete data.validateCode
            delete data.randomKey
          }
          api.login(data).then((res) => {
            if (res && res.data) {
              for (let name in res.data) {
                Cookies.set(name, res.data[name], {expires: 200})
              }
              api.getIpGrantRole().then((res) => {
                if (res && res.data && res.data.forEach) {
                  let result = res.data.filter(item => item.ipCateId === 201)
                  console.log('result', result)
                  if (result.length === 1) {
                    Cookies.set('orgUserId', result[0]['providerId'], {expires: 200})
                    location.href = this.$route.query.redirectURL || '/'
                  } else {
                    this.list = result
                  }
                }
              })
            }
          }).catch(res => {
            if (this.showCode && this.$refs.imgCode) {
              this.$refs.imgCode.refresh()
            }
            if (res.result === '1028') {
              this.showCode = true
            } else {
              this.errorMessage = res.msg
            }
          })
        })
      }
    },
    handleClick (index) {
      Cookies.set('orgUserId', this.list[index]['providerId'], {expires: 200})
      location.href = this.$route.query.redirectURL || '/'
    }
  }
}
</script>

<style lang="scss">
  .login{
    padding:0.4rem;
    .mint-button{
      height:0.9rem;
    }
    li{
      margin-top:0.3rem;
    }
  }
</style>
